<template>
<div class="header-swiper">
   <swiper ref="mySwiper" :options="swiperOptions">
    <swiper-slide v-for='item in swiperlist' :key='item.id'>
        <img :src="item.imgurl" alt="图片呢">
    </swiper-slide>
  <div class="swiper-pagination" slot="pagination"></div>
 </swiper>
  
</div>
</template>



<style scoped lang='stylus'>
@import '~css/var.styl';
.header-swiper{
   background :$bgcolor;
   width:100%;
   height:2rem;
   
  
  
   
}
.swiper-container{
    height :2rem;
   
}

.header-swiper img{
    width:100%;
    height:100%;
  
}
  .header-swiper >>> .swiper-pagination-bullet-active{
        background:$bgcolor;

    }
</style>
<script>
export default{
    props:['swiperlist'],
    
    data(){
        return{
        
            swiperOptions:{
                 pagination: {
            el: '.swiper-pagination'
          },
          loop:true,
          autoplay:true
            }
        }
    }
}


</script>
